<template>
    <div>
        <SearchTop @search="searchPeopleHandler" @addPeople="addPeopleHandler" />
        <PeopleList :tableData="tableData" @remove="removeTablePeople" @edit="editHandler" @look="lookPeopleInfo" />
        <AddAndEide v-model="visible" :data="editData" @editInfo="editInfoHandler" />
        <AddPeople v-model="show" @addPeopleInfo="AddPeopleInforHandler" />
        <Pagenation v-model:pageNum="pageNum" v-model:pageSize="pageSize" :total="total"/>
        <LookPeople v-model="show1" :data="lookData" />
    </div>
</template>

<script lang='ts' setup>
import { addPeople, deleteTableUser, editPeople, getPeopleList, lookSee, searchPeople } from '@/api/PeopleApi';
import AddAndEide from '@/components/people/AddAndEide.vue';
import PeopleList from '@/components/people/PeopleList.vue';
import SearchTop from '@/components/people/SearchTop.vue';
import AddPeople from '@/components/people/AddPeople.vue';
import type { IPeople } from '@/interface/IPeople';
import { ref, watch, watchEffect, type Ref } from 'vue';
import LookPeople from '@/components/people/LookPeople.vue';
import Pagenation from '@/components/people/Pagnation.vue';
const tableData: Ref<IPeople[]> = ref([])
const editData = ref()
const lookData = ref()
const visible: Ref<boolean> = ref(false)
// 分页器数据
let pageNum: Ref<number> = ref(1)  //第几页  当前页
let pageSize: Ref<number> = ref(4)  //每页的数据数量
const total: Ref<number> = ref(0)  //用户数据总数
//添加按钮
const show: Ref<boolean> = ref(false)
// 查看按钮
const show1: Ref<boolean> = ref(false)
// 侦听弹窗
watch(visible, (value: boolean) => {
    if (!value) editData.value = null
})
watchEffect(async () => {
    const result = await getPeopleList(pageNum.value, pageSize.value)
    console.log(result.data)
    tableData.value = result.data.people
    total.value = result.data.total
    // 将获取到的数据传给子组件 进行搜索
    //console.log(tableData.value)
})
// 获取数据进行列
const getList = async () => {
    const result = await getPeopleList(pageNum.value, pageSize.value)
    // console.log(result.data.people)
    tableData.value = result.data.people
    total.value = result.data.total
}
// 点击顶部搜索
const searchPeopleHandler = async (formData: IPeople) => {
    // console.log(formData)
    // 如果id为空字符串,或者0 就恢复列表
    if (formData.id == '' || formData.id === 0) {
        getList()
        return
    }
    const result = await searchPeople(formData.id as number)
    // 这里的result是数组
    tableData.value = [result]
    // 当输入搜索后页码值为1
    total.value = 1

}
// 点击顶部添加按钮
const addPeopleHandler = () => {
    show.value = true
}
// 新增信息提交
const AddPeopleInforHandler = (formData: IPeople) => {
    console.log(FormData)
    tableData.value.push({ ...formData })
    console.log(tableData.value)
}
// 点击查看按钮
const lookPeopleInfo = (row: IPeople) => {
    show1.value = true
    console.log(row)
    lookData.value = row
}
// 编辑之后提交表单数据,即修改内容覆盖原来的内容
const editInfoHandler = (formData: IPeople) => {
    // 找到被编辑的那一行并替换
    const idx = tableData.value.findIndex(item => item.id === formData.id)
    if (idx !== -1) {
        tableData.value[idx] = { ...formData }
    }
}
// 点击列表内的编辑按钮 将列表内容赋值给弹窗
const editHandler = (row: IPeople) => {
    // console.log(row)
    editData.value = row
    visible.value = true
}
// 点击删除
const removeTablePeople = async (id: number) => {
    const result = await deleteTableUser(id)
    if(result.data){
        getList()
    }
    // if (result.data) {
    //     tableData.value = tableData.value.filter(item => item.id !== id)
    // }
}
</script>

<style lang='scss' scoped>
div {
    width: 90%;
    height: 88%;
    background: #132E3F;
    border-radius: 5px;
    margin-left: 10px;
    margin-top: 15px;
}
</style>